/*
Descripttion:

* @version:
 * @Author: cxguo
 * @Date: 2019-10-19 18:03:29
 * @LastEditors  : cxguo
 * @LastEditTime : 2019-12-23 17:43:20
 */
import XEUtils from 'xe-utils/methods/xe-utils'

function getElInput(h, cellRender, params) {
  const { row, column } = params
  const { events, props } = cellRender
  const inputData = {
    props: props,
    model: {
      value: XEUtils.get(row, column.property),
      callback(value) {
        XEUtils.set(row, column.property, value)
      }
    },
    on: {
      'change': (currentValue, oldValue) => {
        events && events.change && events.change(row, { currentValue, oldValue })
      }
    },
    nativeOn: {
      'input': (e) => {
        events && events.input && events.input(e, params)
      },
      'blur': (e) => {
        console.log('失焦：', e)
        // events && events.input && events.blur(e)
      }
    }
  }
  return inputData
}

function getElButton(h, editRender, params) {
  const { events } = editRender
  const chooseButton = {
    props: {
      type: 'primary',
      size: 'mini'
    },
    on: {
      'click': () => {
        events && events.click && events.click(params)
      }
    }
  }
  return chooseButton
}

export default (VXETable) => {
  VXETable.renderer.add('ElInputAndButton', {
    autofocus: 'input.el-input__inner',
    renderEdit(h, editRender, { row, column }) {
      return [
        <div>
          <div class='lnline-block' style='width:156px;'>
            <el-input {...getElInput(h, editRender, { row, column })}></el-input>
          </div>
          <div class='margin-l10 lnline-block'>
            <el-button {...getElButton(h, editRender, { row, column })}>选 择</el-button>
          </div>
        </div>
      ]
    },
    renderCell(h, cellRender, { row, column }) {
      return [
        <el-input {...getElInput(h, cellRender, { row, column })}></el-input>
      ]
    }
  })

  VXETable.renderer.add('ElInputShowBySure', {
    autofocus: 'input.el-input__inner',
    renderDefault(h, cellRender, params) {
      const { row, column } = params
      const value = row[column.property]
      if (!row._sure) return <span>{value}</span>
      return [
        <el-input {...getElInput(h, cellRender, params)}></el-input>
      ]
    }
  })

  VXETable.renderer.add('ElDropdownShowBySure', {
    renderDefault(h, cellRender, params) {
      const { row, column } = params
      const value = row[column.property]
      const { events } = cellRender
      if (!row._sure) return <span>{value}</span>
      const _this = this
      const options = row.options ? row.options[column.property] || [] : []
      function getShowName(value) {
        const arr = options.filter(item => { return item.value === value })
        if (!arr.length) return '请选择'
        return arr[0].label
      }
      function getDropdown(options) {
        const result = []
        if (!options) return result
        options.forEach((item, index) => {
          result.push(<el-dropdown-item command={item.value}>{item.label}</el-dropdown-item>)
        })
        return result
      }
      const data = {
        on: {
          'command': function(val) {
            _this.$set(row, column.property, val)
            events && events.change && events.change(val, row)
          }
        }
      }
      return [
        <el-dropdown {...data}>
          <span class='el-dropdown-link'>
            {getShowName(value)}<i class='el-icon-arrow-down el-icon--right'></i>
          </span>
          <el-dropdown-menu slot='dropdown'>
            { getDropdown(options) }
          </el-dropdown-menu>
        </el-dropdown>
      ]
    }
  })

  VXETable.renderer.add('ElSelectShowBySure', {
    renderDefault(h, cellRender, params) {
      const { row, column } = params
      const value = row[column.property]
      const { events, options } = cellRender
      if (!row._sure) return <span>{value}</span>
      const _this = this
      const selectData = {
        props: {
          value: value,
          automaticDropdown: true
        },
        on: {
          'change': function(value) {
            events && events.change && events.change(value, row)
            _this.$set(row, column.property, value)
          }
        }
      }
      function getOptions(options) {
        const result = []
        if (!options) return result
        options.forEach((item, index) => {
          const data = {
            key: index,
            props: {
              value: item.value,
              label: item.label
            }
          }
          result.push(<el-option {...data}>{events.getLabel(item)}</el-option>)
        })
        return result
      }
      return [
        <el-select {...selectData}>
          { getOptions(options) }
        </el-select>
      ]
    }
  })

  VXETable.renderer.add('ElInputNumberShowBySure', {
    renderDefault(h, cellRender, params) {
      const { row, column } = params
      const value = row[column.property]
      if (!row._sure) return <span>{value}</span>
      return [
        <el-input-number {...getElInput(h, cellRender, { row, column })}></el-input-number>
      ]
    }
  })
}
